<template>
	<view class="pics">
		<!-- 左侧标签区域 -->
		<scroll-view class="left" scroll-y>
			<!-- 定义一个acitves为0，与index的索引绑定,若相等赋予类名，不相等为空 -->
			<view :class="actives === index ? 'active' : ''"  
			v-for="(item, index) in cates" 
			:key="item.id"
			@click="leftClickHandle(index, item.id)"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<!-- 右侧图片区域 -->
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="item in secondData" :key="item.id">
				<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
				<text>{{item.title}}</text>
			</view>
			<text class="none" v-if="secondData.length === 0">暂无数据,请浏览其他页面!</text>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 左侧页面数据
				cates: [],
				// 设置高亮标签
				actives: 0,
				// 右侧图片数据
				secondData: []
			}
		},
		onLoad () {
			this.getPicsCate()
		},
		methods: {
			// 发送请求获取左侧页面数据
			async getPicsCate () {
				const res = await this.$myRequest({
					url: '/api/getimgcategory'
				})
				this.cates = res.data.message
				this.leftClickHandle(0, this.cates[0].id)
			},
			// 点击时获取标签索引用于高亮显示及id用于获取右侧图片数据
			async leftClickHandle (index, id) {
				this.actives = index
				// 获取右侧的数据
				const res = await this.$myRequest({
					url: '/api/getimages/' + id
				})
				this.secondData = res.data.message
			},
			// 预览图片
			previewImg (current) {
				// 用map方法将全部的图片url放入定义的数组中
				const urls = this.secondData.map(item=>{
					return item.img_url
				})
				// current为将点击的设为第一张预览图
				uni.previewImage({
					current,
					urls,
					indicator: 'default'
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	height: 100%;
}
.pics {
	height: 100%;
	display: flex;
	.left {
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #eee;
		view {
			height: 60px;
			line-height: 60px;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active {
			background: $shop-color;
			color: #fff;
		}
	}
	.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.item{
			margin-top: 30rpx;
			border-bottom: 1px solid #C0C0C0;
			image{
				width: 520rpx;
				height: 520rpx;
				border-radius: 5px;
			}
			text{
				font-size: 30rpx;
				line-height: 35rpx;
			}
		}
		.none {
			color: $shop-color;
			
		}
	}
}
</style>
